<template>
  <div id="navigation_list">
    <div class="page-head">
      <a-select style="width: 25%;margin-right: 5%" v-model="top_type" @change="currentChange(1)">
        <a-select-option value="">
          页面类型
        </a-select-option>
        <a-select-option value="1">
          H5
        </a-select-option>
        <a-select-option value="2">
          微信小程序
        </a-select-option>
      </a-select>

      <a-input
        v-model.trim="page_name"
        style="width: 33%;"
        placeholder="请输入页面名称进行搜索"
      >
        <a-icon slot="prefix" type="search" style="color: #999999;" />
      </a-input>

      <a-button type="primary" style="width: 6%;margin-left: 3%" @click="currentChange(1)">搜索</a-button>
    </div>

    <div class="page-content">
      <div class="content-head">
        <div class="left">页面总数: {{main_page_pagination.total}}</div>
        <div content="right" class="right">
          <a-button icon="plus" style="margin-right: 10px" @click="toPage('1')">添加H5顶部菜单</a-button>
          <a-button icon="plus" style="margin-right: 10px" @click="toPage('2')">添加小程序顶部菜单</a-button>
        </div>
      </div>

      <a-spin :spinning="loading">
        <!-- 主活动列表 -->
        <div class="main-page-list">
          <div class="table-box">
            <a-table
              :pagination="{
                  pageSize: main_page_pagination.pageSize,
                  current: main_page_pagination.current,
                  total: main_page_pagination.total,
                  showQuickJumper: true,
                  onChange: currentChange
              }"
              :columns="columns"
              :data-source="main_page_list"
              :rowKey="record => record.id"
            >
              <span slot="tags" class="type-box" slot-scope="tags, record" >
                <a-tooltip v-show="record.top_type == '1'">
                  <template slot="title">
                    H5
                  </template>
                  <i style="color: #5f20fe" class="iconfont icon-ht_btn_wap"></i>
                </a-tooltip>
                <a-tooltip v-show="record.top_type == '2'">
                  <template slot="title">
                    小程序
                  </template>
                  <i style="color: #00dfb9" class="iconfont icon-ht_btn_smallprogram"></i>
                </a-tooltip>
              </span>
              <span slot="action" class="edit-box" slot-scope="text, record">
                <!--<a>页面{{text }}{{record.id}}</a>-->
                <a-tooltip>
                  <template slot="title">编辑</template>
                  <i class="iconfont icon-ht_operation_edit" @click="toPage(record.top_type,record.id)" id="dea"></i>
                </a-tooltip>
                <a-tooltip>
                  <template slot="title">
                    复制页面
                  </template>
                  <i class="iconfont icon-ht_operation_copypage" @click="copyIt(record.id)"></i>
                </a-tooltip>
                <a-tooltip>
                  <template slot="title">删除</template>
                  <i class="iconfont icon-ht_operation_delete" @click="deleteIt(record.id)" id="del"></i>
                </a-tooltip>
              </span>
            </a-table>
          </div>

          <!-- 主活动列表的分页 -->
          <!--<a-pagination-->
            <!--class="page-pagination"-->
            <!--showQuickJumper-->
            <!--:pageSize="main_page_pagination.pageSize"-->
            <!--:current="main_page_pagination.current"-->
            <!--:total="main_page_pagination.total"-->
            <!--@change="currentChange"-->
          <!--/>-->
        </div>
      </a-spin>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    key: "created_at",
    width: 300
  },
  {
    title: "页面名称",
    dataIndex: "name",
    key: "name"
  },
	{
		title: "类型",
		dataIndex: "top_type",
		key: "top_type",
		scopedSlots: { customRender: "tags" }
	},
  {
    title: "操作",
    key: "action",
	  width: 300,
    scopedSlots: { customRender: "action" }
  }
];

export default {
  data() {
    return {
      columns: columns,
	    page_name: "",
	    top_type: '',
      // 状态
      loading: false,
      // 主页列表
      main_page_list: [],
      // 主分页的页码
	    main_page_pagination: {
		    current: 1,
		    pageSize: 10,
		    total: 0
	    },
    };
  },
  computed: {
  },
	created() {
		this.currentChange(1);
	},
  components: {},
  methods: {
    toPage(top_type, id) {
    	if(id) {
		    this.$router.push(this.fun.getUrl("/top_navigation", {}, {page_sort: top_type, id: id}));
      }else {
		    this.$router.push(this.fun.getUrl("/top_navigation",{}, {page_sort: top_type}));
      }
    },

	  /**
	   * 分页切换
	   */
	  currentChange(page) {
		  this.main_page_pagination.current = page;
		  $http
				  .post(
						  "plugin.decorate.admin.decorate-top.get-list",
						  { page: page, name: this.page_name,top_type: this.top_type },
						  "loading"
				  )
				  .then(response => {
					  if (response.result === 1) {
						  this.main_page_pagination.total = response.data.total;
						  this.main_page_pagination.pageSize = response.data.per_page;
						  this.main_page_list = response.data.data;
					  } else {
						  this.main_page_list = [];
						  if (response.data.status === -1) {
							  this.currentChange(1);
						  }
						  // this.$message.error(response.msg);
					  }
				  })
				  .catch(err => {
					  console.error(err);
				  });
	  },
	  /**
	   * 删除页面
	   * @param {string} id 页面ID
	   */
	  deleteIt(id) {
		  const that = this;
		  // 弹层
		  this.$confirm({
			  title: '确认删除该顶部菜单？',
			  onOk() {
				  $http.post("plugin.decorate.admin.decorate-top.del", { id: id }, "loading").then(response => {
					  if (response.result === 1) {
						  that.currentChange(that.main_page_pagination.current);
						  that.$message.success("删除成功");
					  } else {
						  if (response.msg) {
							  that.$message.error(response.msg);
						  }
					  }
				  }).catch(err => {
					  console.log(err);
				  });
			  }
		  });

	  },
	  /**
	   * 复制页面
	   * @param {string} id 页面ID
	   */
	  copyIt(id) {
		  $http.post("plugin.decorate.admin.decorate-top.copy-page", { id: id }, "loading").then(response => {
			  if (response.result === 1) {
				  this.currentChange(this.main_page_pagination.current);
				  this.$message.success("复制成功");
			  } else {
				  if (response.msg) {
					  this.$message.error(response.msg);
				  }
			  }
		  }).catch(err => {
			  console.log(err);
		  });
	  },
  }
};
</script>

<style lang="less" scoped>
.edit-box {
  i {
    color: #999999;
    margin-left: 15px;
    cursor: pointer;
  }
  i:hover {
    color: #ffa800;
  }
}
#navigation_list {
  padding: 30px 20px 20px 20px;
  position: relative;
}
.page-head {
  display: flex;
}
// 主活动列表(左侧)
.main-page-list {
  width: 100%;
  margin-top: 15px;

  // 分页
  .ant-pagination {
    text-align: center;
    margin-top: 24px;
  }
}

.table-box {
  font-weight: bold;
}

.content-head {
  display: flex;
  margin-top: 15px;
  background-color: #ffffff;
  .left {
    position: relative;
    font-weight: bold;
    font-size: 16px;
    margin-left: 10px;
    display: flex;
    align-self: center;
    justify-self: center;
    flex: 1;
  }
  .left::before {
    content: "";
    width: 5px;
    height: 25px;
    position: absolute;
    top: 0;
    left: -10px;
    background: #29ba9c;
  }
  .right {
    display: flex;
    align-self: center;
    justify-self: center;
    align-items: center;
    flex: 0 0 100px;
    margin-right: 13px;
  }
}
</style>
